import React from 'react';
import { Button, Row, Col, Tooltip } from 'antd';
import CommonListsIndex from '../../../../../../components/CommonLists/index';
import FilterTool from '../../../../../../components/FilterTool';
import Add from './add';
import AuthorizeInfoList from './list';
import moment from 'moment';

class AuthorizeInfo extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.state = {};
    this.listsComponent = AuthorizeInfoList;
    this.addComponent = Add;
    this.model_width = '800px';
    this.api = 'authorizeInfo';
    this.queryPanigation = {
      page: 1,
      size: 10,
    };
    this.queryParams = {
      id: props.match.params.id,
    };
  }

  getColumns = () => [
    {
      title: 'appKeyId',
      dataIndex: 'appKeyId',
    },
    {
      title: 'appKey',
      dataIndex: 'appKey',
    },
    {
      title: '机构名称',
      dataIndex: 'organName',
    },
    {
      title: '合作时间',
      dataIndex: 'authorizeTime',
      render: (text) => (
        <Tooltip title={text} placement='topLeft'>
          <div className='overflowtext'>{moment().format('YYYY-MM-DD HH:mm:ss')}</div>
        </Tooltip>
      ),
    },
  ];

  onChangePagination = (pageNumber, type = 'current_page') => {
    const t = type === 'current_page' ? 'page' : 'size'
    this.updatePanagaition && this.updatePanagaition({
      [t]: pageNumber,
    });
    this.freshQueryList();
  };

  refreshFilter = (params, type) => {
    const { id } = this.queryParams;
    this.queryParams = { id, ...params };
    if (type === false) return
    this.freshQueryList(this.queryParams);
  };

  // 重置筛选项
  resetList = () => {
    this.queryPanigation = {
      page: 1,
      size: 10,
    };
  };

  render() {
    const { records, current, total, size } = this.state;
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: 'appkey | 机构名称',
      },
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={6}>
            <Button type='primary' onClick={this.add}>
              管理权限
            </Button>
          </Col>
          <Col span={18}>
            <FilterTool
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              justify='end'
              refresh={this.resetList}
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.props}
            list={records}
            currentPage={current}
            totalCount={total}
            pageSize={size}
            edit={this.edit}
            rowKey='id'
            columns={this.getColumns()}
            queryList={this.freshQueryList}
            refreshTableFilter={this.refreshTableFilter}
            onChangePagination={this.onChangePagination}
          />
        </div>
      </div>
    );
  }
}

export default AuthorizeInfo;
